<template>
  <div class="home">
    <div class="search-div">
      <!-- 用户点击输入框之后要发过去的数据 -->
      <el-form :inline="true" ref="form" :model="dishInfo" label-width="80px">
        <el-form-item label="菜品名称">
          <el-input placeholder="请输入菜品名称" v-model="dishInfo.dishName"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格">
          <el-input
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="请输入菜品价格"
            v-model="dishInfo.price"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜品分类">
          <el-select v-model="dishInfo.category.id" placeholder="请选择菜品分类">
            <!-- label是菜品分类名称  value是要传过去的菜品分类id  v-for 页面动态创建菜品分类 需要循环遍历数组  -->
            <el-option
              v-for="category in categoryList"
              :key="category.id"
              :label="category.dishCategoryName"
              :value="category.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">开始时间</span>
            <!-- v-model=""  把值绑定到输入框  -->
            <el-date-picker v-model="dishInfo.startTime" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">结束时间</span>
            <el-date-picker v-model="dishInfo.endTime" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryDish()">搜索</el-button>
          <el-button type="danger" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dish-table">
      <!-- 多条件分页查询 -->
      <el-table :data="dishList" style="width: 100%">
        <el-table-column label="序号" align="center" width="70">
          <!-- 自定义一个名字叫scope  代指每一个json对象 
           {{插值表达式}}  可以让数据库里面的序号呈现到页面的时候按顺序排列
          -->
          <template slot-scope="scope">
            <!-- currentPage：当前页   limit：每一页显示的条数   scope.$index + 1 每一个菜品对象.下标+1       -->
            {{ (currentPage - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="dishName" label="菜品名称" align="center" width="180"></el-table-column>
        <el-table-column prop="price" label="菜品价格" align="center"></el-table-column>
        <el-table-column prop="buyCount" label="菜品销量" align="center"></el-table-column>
        <el-table-column label="菜品图片" align="center">
          <template slot-scope="scope">
            <!-- 取到每一张图片 -->
            <img :src="scope.row.picPath" width="50px" />
          </template>
        </el-table-column>
        <el-table-column prop="created" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="updated" label="结束时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- router 路由标签  :to 去到修改(edit)页面 -->
            <router-link :to="{ name: 'edit', params: { id: scope.row.id } }">
              <el-button size="mini" type="primary">修改</el-button>
            </router-link>
            <!-- 根据id删除每一行菜品 -->
            <el-button size="mini" type="danger" @click="deleteDish(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="category.dishCategoryName" label="菜品分类名称"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="dishestotal"
          :page-size="limit"
          :current-Page="currentPage"
          @current-change="queryDish"
          :pager-count="5"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 把用户输入的值变成json格式传到java
      dishInfo: {
        dishName: null,
        price: null,
        category: {
          // sql语句判断的时候写的是0
          id: 0
        },
        startTime: null,
        endTime: null
      },
      categoryList: [],
      dishList: [],
      currentPage: 1,
      limit: 5,
      dishestotal: ""
    };
  },
  // 页面还没有加载的时候请求服务器里面的数据
  created() {
    this.findDishCategoryAll();
    this.queryDish();
  },
  methods: {
    // 查询所有菜品分类信息
    findDishCategoryAll() {
      // 发起请求
      this.$ajax
        .post("http://localhost:8080/dishCategory/all")
        // 得到结果集
        .then(res => {
          // 绑定到页面上
          this.categoryList = res.data.date.list;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("连接超时请检查网络");
        });
    },
    // 多条件分页查询 默认页数为1
    queryDish(currentPage = 1) {
      this.currentPage = currentPage;
      this.$ajax
        .post(
          "http://localhost:8080/dish/query/" +
            this.currentPage +
            "/" +
            this.limit,
          this.dishInfo
        )
        // 得到结果集
        .then(res => {
          console.log(res);
          // 绑定到页面上
          this.dishList = res.data.date.dishList.dishess;
          this.dishestotal = res.data.date.dishList.dishestotal;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("连接超时请检查网络");
        });
    },
    // 清空按钮点击事件
    clear() {
      this.dishInfo = {
        dishName: null,
        price: null,
        category: {
          // sql语句判断的时候写的是0
          id: 0
        },
        startTime: null,
        endTime: null
      };
    },

    deleteDish(id) {
      this.$confirm("是否删除该菜品信息", "菜品删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger"
      })
        .then(() => {
          this.$ajax
            .post("http://localhost:8080/dish/delete/" + id)
            // 得到结果集
            .then(res => {
              if (res.data.date == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });

                // 删除失败走这里
              } else {
                this.$message({
                  type: "danger",
                  message: res.data.message
                });
              }
              // 刷新页面得到最新的数据
              this.queryDish();
            });
        })
        .catch(() => {
          this.$message({
            type: "danger",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.page {
  text-align: center;
  margin-top: 30px;
}
</style>